Style-Kurzreferenz.

Pseudotags und Eingindung externer Styles

Inhalt der CSS-Datei 'css.css':
/* Pseudotags für farbigen Text */
r {color:red;}
g {color:green;}
c {color:cyan;}

Einbinden der Styles css.css:
<link rel="stylesheet" href="css.css">

Anwendung (siehe Wirkung im Haupttitel):
<h1><r>Style-</r><g>Kurz</g>ref<c>erenz.</c></h1>

Pseudotags

Formatierungs-Ziele

Inhalt der Styles:
<style>
 #identifikation {color:#ff00ff;} /* Alle Tags mit der ID 'identifikation' werden beeinflusst */
 .klasse {color:cyan;}            /* Alle Tags mit der Klasse 'klasse' werden beeinflusst */
seo {color:red;}                  /* Der Tag <seo> wird beeinflusst */
seo#identifikation {color:blue;}  /* Der Tag <seo>, wenn er die ID 'identifikation' hat, wird beeinflusst */
seo.klasse {color:green;}  	  /* Der Tag <seo>, wenn er die Klasse 'klasse' hat, wird beeinflusst */
input[type=password],
input[type=email] {color:#ee88ff;background-color:silver;} /* Es werden aussschliesslich die zwei Input-Typen 'password' und 'email' beeinflusst */
</style>

Anwendung (siehe Wirkung in der Auflistung oben):
<farbe class='klasse' >Farbe Cyan</farbe>
<farbe id='identifikation' >Farbe Violet</farbe>
<seo>Farbe Rot</seo>
<seo class='klasse' >Farbe Grün</seo>
<seo id='identifikation' >Farbe Blau</seo>
Password: <input type=Password />,  E-Mail <input type=Email />, Text <input type=Text />

Pseudo_Klassen (:) Pseudo_Elemente (::)

<style>
seo:hover {color:yellow;}            /* Der Tag <seo> (roter Text) wird beim Überfahren beeinflusst */
a.test:visited  {color:#f0f0ff;}     /* Der Tag <a> wird beim nach dem Anklicken beeinflusst */   
a:visited:focus  {color:#ff00ff;}    /* Der Tag <a> wird beeinflusst wenn er den Fokus hat (Tab-Navigation oder Anklicken) */ 
h2.springen:hover {text-align:right;}/* Spielerei mit dem Titel dieses Abschnittes */ 
::selection {back9ground-color:#084;color:#0f8}  /* Eigene Farben beim Markieren */ 
h1::first-letter  {font-size: 4rem;} /* Der erste Buchstaben des Haupttitel (Seitenstart) wird grösser. */ 
</style>

Styles wie wo?

<script>
element = document.getElementById("gColor");

fg = element.style.color;
hg = element.style.backgroundColor;
document.write("Textfarbe= " + fg + ", Hintergrund= " + hg);
	
gesetzteStyles = window.getComputedStyle(element);
fg = gesetzteStyles.getPropertyValue('color');
hg = gesetzteStyles.getPropertyValue('background-color');	
document.write("Textfarbe= " + fg + ", Hintergrund= " + hg );
</script>

<script>
	const farben = ['aquamarine','beige','khaki','bisque','pink','ivory','yellow','gray'];
	var f = 0;
	farbanpassen();
	function farbanpassen()
	{
		console.log(farben[f]);
		element = document.getElementById("farbButton") ;
		element.style.backgroundColor = farben[f];
		element.innerText = farben[f];
		f++;
		if(f>(farben.length - 1)) f=0;
	}	
</script>

Styles Eigenschaften

	Referenzen:
	-----------
	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
	https://www.w3.org/Style/CSS/
	
	Block-TAG
	https://www.w3schools.com/htmL/html_blocks.asp
	
	https://developer.mozilla.org/de/docs/Web/CSS/font
	https://www.w3schools.com/jsref/prop_style_font.asp
	
Masseinheiten:	
        https://www.w3.org/Style/Examples/007/units.de.html
		https://wiki.selfhtml.org/wiki/CSS/Wertetypen
		https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen_und_Verh%C3%A4ltnisse#Numerische_Konstanten

Farbnamen:	
       https://www.w3.org/wiki/CSS/Properties/color/keywords